<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <title>个人信息</title>
</head>
<jsp:include page="common/header.jsp"/>
<!-- 充值窗口 -->
<div class="cvs" id="cvs2_logon" style="display:none">

    <div class="newModWin zfb-win">
        <section class="clearfix">
            <div class="title">支付宝快速充值兑换积分</div>
            <!-- 关闭弹出层 -->
            <div class="close" id="cvs2-close"></div>
        </section>

        <div class="zfb">
            <div class="clearfix">
                <input type="number" name="money" placeholder="请输入充值金额,单位元"/>
                <input type="button" class="zfb-btn" value="充值" />
            </div>
            <b>充值比例：1元=10积分</b>
        </div>
    </div>
</div>
<article>
    <!-- 网站主体 -->
    <div id="main" >
        <!-- 定义右侧窗口信息 -->
        <section class="aside">
            <aside class="users">
                <c:set value="${sessionScope.local_session_user_flag}" var="currentUser"></c:set>
                <div class="pu">
                    <p class="photo">
                        <span class="lf">个人头像</span>

                        <img class="rf" v-if="show" src="${pageContext.request.contextPath}/images/unknown.png" />

                        <img class="rf" v-else :src="'${pageContext.request.contextPath}'+imgUrl"/>
                       <!-- /user/photo 获取当前登录的用户头像-->

                    <input type="file" name="" @change="uploadPhoto" accept="image/png,image/jpeg,image/jpg,image/gif">
                    </p>

                    <p class="tel disable" >
                        <span class="lf">手机号码</span>
                        <span class="rf">${fn:substring(currentUser.tel,0,3)}****${fn:substring(currentUser.tel,7,-1)}</span>
                    </p>

                    <p class="nickname">
                        <span class="lf">昵称</span>
                        <span class="rf">{{nickName}}</span>

                    </p>

                    <p class="sex">
                        <span class="lf">性别</span>
                        <span class="rf">{{sex}}</span>
                    </p>

                    <p class="email">
                        <span class="lf">邮箱</span>
                        <span class="rf">{{email}}</span>
                    </p>
                    <a href="${pageContext.request.contextPath}/password/modify">
                        <p class="password">
                            <span class="lf">密码</span>
                        </p>
                    </a>
                </div>


            </aside>

            <!-- 修改 昵称的 窗口 -->
            <aside class="modify-win nickname">
                <div class="title"><i></i>修改-昵称</div>
                <div class="content">
                    <input type="text" name="nickName" :value="nickName">
                    <button @click="changeNickName()">确定修改</button>
                </div>
            </aside>
            <!-- 修改 性别的 窗口 -->
            <aside class="modify-win sex">
                <div class="title"><i></i>修改-性别</div>
                <div class="content">
<%--                    <c:set var="userSex" value="${currentUser.info.sex}"></c:set>--%>
                    <input type="radio" name="sex" value="m" @change="newSex='m'" <c:if test="${userSex eq 'm'}">checked</c:if> checked id="c-sex-m"><label for="c-sex-m">男</label>
                    <input type="radio" name="sex" value="f" @change="newSex='f'" <c:if test="${userSex eq 'f'}">checked</c:if> id="c-sex-f"><label for="c-sex-f">女</label>
                    <input type="radio" name="sex" value="s" @change="newSex='s'" <c:if test="${userSex eq 's'}">checked</c:if> id="c-sex-s"><label for="c-sex-s">保密</label>
                    <button @click="changeSex()">确定修改</button>
                </div>
            </aside>
            <!-- 修改 邮箱的 窗口 -->
            <aside class="modify-win email">
                <div class="title"><i></i>修改-邮箱</div>
                <div class="content">
                    <input type="text" name="oldEmail" value="" ref="oldEmail" placeholder="请输入原注册的邮箱">
                    <input type="text" name="newEmail" value="" ref="newEmail" placeholder="请输入新的邮箱">
                    <button @click="changeEmail()">确定修改</button>
                </div>
            </aside>

            <!-- 关注数 -->
            <aside class="psl">
                <a class="focus-on" href="${pageContext.request.contextPath}/attention" v-if="totalRows > 0">关注数:<b>{{totalRows}}</b></a>
                <a class="focus-on" href="${pageContext.request.contextPath}/attention" v-else>关注数:<b>0</b></a>
                <a class="fan" v-if="fenSiNum2 > 0">粉丝数:<b>{{fenSiNum2}}</b></a>
                <a class="fan" v-else>粉丝数:<b>0</b></a>
            </aside>

            <aside class="info">
                <h1>
                    <a>用户积分:<b class="so" v-text="totalScore">8</b></a>
                    <a class="zfb-cz-btn" onclick="$('#cvs2_logon').show();">支付宝积分充值</a>
                </h1>
                <!-- 图表形式显示积分  -->
                <div id="user-score-mark" class="u-mark"></div>
            </aside>
        </section>
        <section>
            <h1 class="detail-score">积分明细</h1>
            <ul class="person-info">
                <li>
                    <strong class="c1">资源名称</strong>
                    <strong class="c2">积分变动</strong>
                    <strong class="c3">原因</strong>
                    <strong class="c4">时间</strong>
                </li>

                <!-- <li>
                    <a>暂无数据</a>
                </li> -->

                <template v-if="scoreList.length == 0">
                    <li ><a>暂无数据</a></li>
                </template>


                <template v-else>
                    <li v-for="(item,index) in scoreList">
                        <a class="c1 link" :href="'${pageContext.request.contextPath}/resource/detail?resId=' + item.res_id " v-if="item.resource_name!=null">{{item.resource_name}}</a>
                        <a class="c1"   v-else="">暂无数据</a>
                        <span class="c2">{{item.score}}</span>
                        <span class="c3"> - {{item.remark}}{{item.score < 0 ? "扣除" : "赠送"}}积分</span>
                        <span class="c4">{{getTime(item.create_time)}}</span>
                    </li>
                </template>

         <!-- 分页
        1. 如果总页数 不超过 5页 ， 显示 1 ~~ 总页数
        2. 如果 总页数 超过 5页， 且 当前页 <= 3 , 则显示 1 ~ 5 页
        3. 如果 总页数 超过 5页， 且 当前页 >= 总页数 -2 ， 则显示 最后 5页的内容
        4. 显示  当前页 -2  ~~~ 当前页 + 2
    -->
            <div class="pagination">
                <!--如果当前页 > 1,则 显示上一页 -->
                <a class="left" v-if="page > 1" @click="page = page -1"></a>
                <template v-if="total <= 5">
                    <a v-for="p in total" :class="{act:p == page}" @click="page = p">{{p}}</a>
                </template>
                <template v-else-if="page <= 3">
                    <a v-for="p in 5" :class="{act:p==page}" @click="page=p">{{p}}</a>
                </template>
                <template v-else-if="page >= total - 2">
                    <a v-for="p in 5" :class="{act: total - 5 + p == page}" @click="page=total-5+p">{{total-5+p}}</a>
                </template>
                <template v-else>
                    <a v-for="p in 5" :class="{act:page-3+p==page}" @click="page=page-3+p">{{page-3+p}}</a>
                </template>
                <a class="right" v-if="page != total" @click="page=page+1"></a>
                <select v-model="page">
                    <option v-for="p in total" :value="p">{{p}}/{{total}}</option>
                </select>
            </div>
            </ul>
        </section>

    </div>
</article>
<jsp:include page="common/footer.jsp"/>
<script>
    new Vue({
        el:"#main",
        data:{
            fenSiNum:"",
            fenSiNum2:"",
            scoreList:[],
            page:1,
            total:0,
            totalScore:0,
            nickName:"${currentUser.info.nickName}",
            sex:"${currentUser.info.sexDisplay}",
            newSex:"",
            show: ${empty currentUser.info.photo},
            imgUrl:"/user/photo" , // 查询用户头像地址
            email:"***${fn:substring(currentUser.email,fn:indexOf(currentUser.email,'@'),-1)}",
            totalRows:"",
        },
        created(){ //vue实例创建成功后

            // 调用异步请求获取积分明细
            this.getScoreDetail();
            this.fensi2();
            this.getfocus();
        },
        methods:{
            fensi2(){
                fetch("${pageContext.request.contextPath}/fenNum2").then(ret => {
                    if (ret.status) {
                        this.fenSiNum2 = ret.data[0].s;
                    }
                })
            },
            getfocus(){
                fetch("${pageContext.request.contextPath}/detail/attention").then(ret =>{
                    if (ret.status){
                        this.attentionList = ret.data.list;
                        this.total = ret.data.total;
                        this.totalRows = ret.data.totalRows;
                    }
                })
            },
            changeEmail(){
                let oldEmail = this.$refs.oldEmail.value;
                let newEmail = this.$refs.newEmail.value;
                fetch("${pageContext.request.contextPath}/change/email?oldEmail=" + oldEmail + "&newEmail=" + newEmail).then(ret =>{
                    if (!ret.status){
                        if ("oldEmail" == ret.data){
                            $(this.$refs.oldEmail).tooltips(ret.message);
                        }
                        else {
                            $(this.$refs.newEmail).tooltips(ret.message);
                        }

                    }
                    if (ret.status){
                        this.email = ret.data;
                        $(".modify-win i").click();
                    }
                })
            },
            uploadPhoto(){
                // 1、获取上传的文件
                let inp = event.target;
                let file = inp.files[0];

                // 2、使用 fetch异步上传文件
                let formData = new FormData();
                formData.append("photo",file);

                fetch("${pageContext.request.contextPath}/user/photo",{
                    method:"POST",
                    body:formData
                }).then(ret => {
                    // 上传头像成功
                    if (ret.status){
                        this.show = false;
                        this.imgUrl=ret.data;
                    }
                })
            },
            changeSex(){
                fetch("${pageContext.request.contextPath}/change/sex?sex=" + this.newSex).then(ret =>{
                    if (ret.status){
                        this.sex = ret.data;
                        $(".modify-win i").click();
                    }
                })
            },
            changeNickName(){
                let nick = $("input[name=nickName]");
                this.nickName = nick.val();
                fetch("${pageContext.request.contextPath}/change/nickName?nickName=" + this.nickName).then(ret =>{
                    if (ret.status){
                        this.nickName = ret.data;
                        $(".modify-win i").click();
                    }
                })
            },
            getScoreDetail(){
                fetch("${pageContext.request.contextPath}/user/detail/score").then(ret => {
                    if (ret.status){
                        this.scoreList = ret.data.list;
                        this.total = ret.data.total;
                    }
                })
            },
            getTime(timestamp){
                let date = new Date(timestamp);
                return date.format("yyyy-MM-dd HH:mm:ss")
            }
        },
        watch:{
            page: function(newPage,oldPage){
                // 获取 新页码 对应的 数据
                fetch("${pageContext.request.contextPath}/user/detail/score?page=" + newPage).then(ret =>{
                    if (ret.status){
                        this.scoreList = ret.data.list;
                        this.total = ret.data.total;
                    }
                })
            }
        },
        mounted(){

            let option = {
                title: {
                    text: '用户积分信息-积分统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    top: 'bottom',
                    data: ['支付宝充值', '用户注册', '上传资源', '评论资源', '下载文件']
                },
                series: [
                    {
                        name: '积分来源',
                        type: 'pie',
                        radius: '50%',
                        center: ['40%', '45%'],
                        data: [
                            {value: 335, name: '支付宝充值'},
                            {value: 310, name: '用户注册'},
                            {value: 234, name: '上传资源'},
                            {value: 135, name: '评论资源'},
                            {value: 1548, name: '下载文件'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 获取 服务器返回的数据、并修改 option中 的data， 然后再调用 下面这一行 js 代码
            // 图表中的数据要求以 JSON 格式的方式 返回
            fetch("${pageContext.request.contextPath}/user/statics/score").then(ret => {
                // 获取积分来源类型列表
                let typeList = ret.data.map(t => t.name) ;
                option.legend.data = typeList ;
                console.log(ret.data)
                option.series[0].data = ret.data.map(d => ({name: d.name, value: Math.abs(d.value)})) ;
                echarts.init($("#user-score-mark").get(0)).setOption(option);
                console.log(ret.data)
                // 获取总积分个数
                this.totalScore = ret.data.reduce((s , d) => s+= d.value, 0) ;
            })
        }
    })

    $(function() {
        // 修改个人信息
        $(".users .pu").on("click", ".nickname, .sex, .email" , function(event){
            $(this).parents(".users").slideUp();
            let cls = this.className ;
            $(`.modify-win.\${cls}`).slideDown()
        })
        // 取消修改信息效果
        $(".modify-win i").on("click", function(event){
            console.log($(this).parents(".modify-win"))
            $(this).parents(".modify-win").slideUp()
            $("aside.users").slideDown()
        })

    })

</script>
</body>

</html>
